<template>
	<view class="">
		<view v-for="(item,i) in listinfo" :key="i">
			<view class="line_111"></view>
			<view class="text_name" >
				<text class="text_title">{{item.materaleName}}</text>
				<view class="flex-row" style="margin: 20rpx 0;">
					<image :src="item.brandUrl" mode="" class="image_111"></image>
					<text class="text_999">{{item.brandName}}</text>
				</view>
			</view>
			<view class="line"></view>
			<view class="text_con">
				<view class="text_arr"  style="" v-for="(demo,j) in item.detailedLists" :key="j">
					<view class="flex-row">
						<view class="group_999">
							<image :src="demo.detailedPicture" mode=""></image>
						</view>
						<view class="flex-col text_333">
							<text>{{demo.productName}}</text>
							<text>备注：{{demo.remarks}}</text>
						</view>
					</view>
					<view class="flex-col fankui">
						<text class="fankui_title">报价反馈</text>
						<text class="fankui_con" v-if="demo.money !=null">{{demo.consultingRemarks}} <text>￥{{demo.money}}</text></text>
						<img :src="demo.detailedPicture" class="backOrder" >
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() { 
			return {
				arr: [{
					name: '111',
					url: 'https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1659546000&t=e45aceda736e37022247ba17a8e74f2b'
				},
				{
					name: '111',
					url: 'https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1659546000&t=e45aceda736e37022247ba17a8e74f2b'
				}
				],
				ordersId:'',
				listinfo:'',
				backPic:[] // 上传多张循环此数据
			}
		},
		onLoad(option) {
			this.ordersId=  option.ordersId
			this.getdata()
		},
		methods: {
			getdata(){
				this.$http('oteherL.feedback',{
					ordersId:this.ordersId
				}).then(res=>{
					if(res.code==200){
						this.listinfo = res.data;
						res.data.forEach(item=>{
							
							item.detailedLists.forEach(item=>{

								item.detailedPictures.forEach(item=>{
									
									this.backPic = item.detailedPictureUrl.split(',')
									
								})
							})
						})
						
					}else{
						
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.backOrder {
		width: 85px; 
		height:85px;
		margin-top:10px;
		border-radius: 15px;
	}
	.flex-row {
		align-items: center;
	}
	/deep/ uni-image>div, uni-image>img {
		border-radius: 24rpx;
	}
	.line_111 {
		width: 100%;
		height: 20rpx;
		border-top: 1px solid #eee;
	}

	.text_name {
		width: 92%;
		margin: 0 auto;
		
	}

	.text_name .image_111 {
		width: 100rpx;
		height: 100rpx;
	}

	.text_title {
		color: #999;
		font-size: 28rpx;
	}

	.text_999 {
		color: #333;
		font-size: 30rpx;
		line-height: 80rpx;
		margin-left: 40rpx;
	}

	.line {
		width: 100%;
		height: 20rpx;
		background-color: #eee;
	}

	.text_con {
		// width: 95%;
		margin: 0 auto;
		
		padding: 32rpx;
	}

	// .text_999{
	// 		color: #999;
	// 		font-size: 30rpx;
	// 	}
	.text_333 {
		margin-left: 20rpx;
	}

	.text_333 text:first-child {
		font-size: 30rpx;
		color: #333;
	}

	.text_333 text:last-child {
		font-size: 28rpx;
		color: #999;
		padding-top: 60rpx;
	}

	.group_999 {
		width: 170rpx;
		height: 170rpx;
	}

	.group_999 image {
		width: 100%;
		height: 100%;
	}
	.fankui{
		width: 100%;
		background-color: #EDF3FF;
		padding: 20rpx 30rpx;
		border-radius: 28rpx;
		margin-top: 30rpx;
	}
	.fankui_title{
		color: #999;
		font-size: 28rpx;
	}
	.fankui_con{
		color: #333;
		font-size: 32rpx;
		margin-top: 20rpx;
	}
	.fankui_con text{
		color:rgb(200, 102, 60);
	}
	.text_arr{
		padding: 30rpx 0;
		border-bottom: 1px solid #eee;
	}
</style>
